<%--
  Created by IntelliJ IDEA.
  User: Wanghaha
  Date: 2019/11/19
  Time: 11:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<%@ include file="/head.jsp" %>
<body>
<div class="layui-tab" lay-filter="test1">
    <input type="hidden" name="userId" value="${userId}">
    <input type="hidden" name="videoId" value="${videoId}">
    <div class="layui-upload">
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>视频名</th>
                    <th>大小</th>
                    <th>排序</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
        <button style="margin-left: 20px" type="button" class="layui-btn layui-btn-normal" id="testList">选择资料</button>
        <button style="margin-left: 20px" type="submit" class="layui-btn" id="testListAction">开始上传</button>
    </div>


</div>

<script>


</script>
<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;
        form.render();
        // //监听提交
        // form.on('submit(formDemo)', function(data){
        //     layer.msg(JSON.stringify(data.field));
        //     return false;
        // });
    });
</script>


<script>
    layui.use('element', function () {
        var element = layui.element;

        //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
        var layid = location.hash.replace(/^#test1=/, '');
        element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项

        //监听Tab切换，以改变地址hash值
        element.on('tab(test1)', function () {
            location.hash = 'test1=' + this.getAttribute('lay-id');
        });
    });
</script>
<script>
    layui.use(['form', 'layer', 'upload'], function () {
        var layer = layui.layer;
        var upload = layui.upload;
        var $ = layui.jquery;

        upload.render({ //允许上传的文件后缀
            elem: '#test4'
            , url: '/upload/'
            , accept: 'video' //普通文件
            //,exts: 'zip|rar|7z' //只允许上传压缩文件
            , done: function (res) {
                console.log(res)
            }
        });


        //设定文件大小限制
        upload.render({
            elem: '#test7'
            , url: '/upload/'
            //,size: 60000 //限制文件大小，单位 KB
            , done: function (res) {
                console.log(res)
            }
        });
        //多文件列表示例
        var demoListView = $('#demoList')
            ,files = []
            , uploadListIns = upload.render({
            elem: '#testList'
            ,url: '/manage/videos/uploadVideoInfo'
            //  ,size: 60 //限制文件大小，单位 KB
            ,accept: 'file'
            ,exts: 'zip|rar|7z'
            ,acceptMime: '.rar,.zip,.7z'
            //, data: {'userId':d.userId,'userDesc':d.userDesc,'videoImg':d.videoImg,'videoName':d.videoName,'stIdOne':d.stIdOne,'stIdTwo':d.stIdTwo}   //可放扩展数据  key-value
            , multiple: true
            , auto: false
            , bindAction: '#testListAction'
            ,before:function () {
                this.data = {
                    userId: $('input[name="userId"]').val(),
                    videoId: $('input[name="videoId"]').val(),
                    sort:1
                 }
            }
            , choose: function (obj) {
                files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file,data, result) {
                    var name = file.name.substr(0,file.name.lastIndexOf("."));
                    var suffix = file.name.substr(file.name.lastIndexOf(".")+1);
                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td class="table-td demo-edit" ><div  class="layui-table-cell">'+file.name+'</div></td>'
                        , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                        , '<td>1</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    tr.find('.demo-edit').on('click',function(){
                        var e = $(this);
                        var o = e.children(".layui-table-cell");
                        var d = $('<input class="layui-input layui-table-edit">');
                        d[0].value = o.text(), e.find(".layui-table-edit")[0] || e.append(d), d.focus()
                        d.blur(function(){
                            var l = $(this);
                            l.siblings('.layui-table-cell').html(this.value);
                            obj.resetFile(index, file, this.value+'.'+suffix);
                            l.remove();
                        })
                    });

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    demoListView.append(tr);
                });
            }
            , done: function (res, index, upload) {
                if(res.code == 200){ //上传成功
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    console.log(res);
                    $('#videoId').html(res.data);
                    console.log($('#videoId').html());
                    return delete this.files[index] ; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
    });

</script>
</body>
</html>



<%--&lt;%&ndash;--%>
<%--  Created by IntelliJ IDEA.--%>
<%--  User: Wanghaha--%>
<%--  Date: 2019/11/19--%>
<%--  Time: 11:33--%>
<%--  To change this template use File | Settings | File Templates.--%>
<%--&ndash;%&gt;--%>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<%--%>
<%--    String path = request.getContextPath();--%>
<%--    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";--%>
<%--%>--%>
<%--<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>--%>
<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>--%>
<%--<html>--%>
<%--<head>--%>
<%--    <title>Title</title>--%>
<%--</head>--%>
<%--<%@ include file="/head.jsp" %>--%>
<%--<body>--%>
<%--    <input type="hidden" name="userId" value="${userId}">--%>
<%--    <input type="hidden" name="videoId" value="${videoId}">--%>
<%--    <div class="layui-upload">--%>

<%--        <div class="layui-upload-list">--%>
<%--            <table class="layui-table">--%>
<%--                <thead>--%>
<%--                <tr>--%>
<%--                    <th>视频名</th>--%>
<%--                    <th>大小</th>--%>
<%--                    <th>排序</th>--%>
<%--                    &lt;%&ndash;<th>排序</th>&ndash;%&gt;--%>
<%--                    <th>操作</th>--%>
<%--                </tr>--%>
<%--                </thead>--%>
<%--                <tbody id="demoList"></tbody>--%>
<%--            </table>--%>
<%--        </div>--%>
<%--        <button style="margin-left: 20px" type="button" class="layui-btn layui-btn-normal" id="testList">选择资料</button>--%>
<%--        <button type="button" class="layui-btn" id="testListAction">开始上传</button>--%>
<%--    </div>--%>




<%--<script>--%>
<%--    layui.use(['form', 'layer', 'upload'], function () {--%>
<%--        var $ = layui.jquery--%>
<%--            ,upload = layui.upload;--%>

<%--        upload.render({ //允许上传的文件后缀--%>
<%--            elem: '#test4'--%>
<%--            ,url: '/upload/'--%>
<%--            ,accept: 'file' //普通文件--%>
<%--            ,exts: 'zip|rar|7z' //只允许上传压缩文件--%>
<%--            ,done: function(res){--%>
<%--                console.log(res)--%>
<%--            }--%>
<%--        });--%>

<%--        //设定文件大小限制--%>
<%--        upload.render({--%>
<%--            elem: '#test7'--%>
<%--            ,url: '/upload/'--%>
<%--            ,size: 60 //限制文件大小，单位 KB--%>
<%--            ,done: function(res){--%>
<%--                console.log(res)--%>
<%--            }--%>
<%--        });--%>

<%--        var demoListView = $('#demoList')--%>
<%--            ,files = []--%>
<%--            ,uploadListIns = upload.render({--%>
<%--            elem: '#testList'--%>
<%--            ,url: '//manage/videos/uploadVideoInfo'--%>
<%--            ,accept: 'file' //普通文件--%>
<%--            ,exts: 'zip|rar|7z' //只允许上传压缩文件--%>
<%--            ,acceptMime: '.rar,.zip,.7z'   //可放扩展数据  key-value--%>
<%--            ,multiple: true--%>
<%--            ,auto: false--%>
<%--            ,bindAction: '#testListAction'--%>
<%--            ,before:function () {--%>
<%--                this.data = {--%>
<%--                    userId: $('input[name="userId"]').val(),--%>
<%--                    videoId: $('input[name="videoId"]').val(),--%>
<%--                    sort:1--%>
<%--                }--%>
<%--            }--%>
<%--            , choose: function (obj) {--%>
<%--                files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列--%>
<%--                //读取本地文件--%>
<%--                obj.preview(function (index, file,data, result) {--%>
<%--                    var name = file.name.substr(0,file.name.lastIndexOf("."));--%>
<%--                    var suffix = file.name.substr(file.name.lastIndexOf(".")+1);--%>
<%--                    var tr = $(['<tr id="upload-' + index + '">'--%>
<%--                        , '<td class="table-td demo-edit" ><div  class="layui-table-cell">'+file.name+'</div></td>'--%>
<%--                        , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'--%>
<%--                        , '<td>'+data.userId+'</td>'--%>
<%--                        , '<td>'--%>
<%--                        , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'--%>
<%--                        , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'--%>
<%--                        , '</td>'--%>
<%--                        , '</tr>'].join(''));--%>

<%--                    tr.find('.demo-edit').on('click',function(){--%>
<%--                        var e = $(this);--%>
<%--                        var o = e.children(".layui-table-cell");--%>
<%--                        var d = $('<input class="layui-input layui-table-edit">');--%>
<%--                        d[0].value = o.text(), e.find(".layui-table-edit")[0] || e.append(d), d.focus()--%>
<%--                        d.blur(function(){--%>
<%--                            var l = $(this);--%>
<%--                            l.siblings('.layui-table-cell').html(this.value);--%>
<%--                            obj.resetFile(index, file, this.value+'.'+suffix);--%>
<%--                            l.remove();--%>
<%--                        })--%>
<%--                    });--%>

<%--                    //单个重传--%>
<%--                    tr.find('.demo-reload').on('click', function () {--%>
<%--                        obj.upload(index, file);--%>
<%--                    });--%>

<%--                    //删除--%>
<%--                    tr.find('.demo-delete').on('click', function () {--%>
<%--                        delete files[index]; //删除对应的文件--%>
<%--                        tr.remove();--%>
<%--                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选--%>
<%--                    });--%>

<%--                    demoListView.append(tr);--%>
<%--                });--%>
<%--            }--%>
<%--            , done: function (res, index, upload) {--%>
<%--                if(res.code == 200){ //上传成功--%>
<%--                    var tr = demoListView.find('tr#upload-'+ index)--%>
<%--                        ,tds = tr.children();--%>
<%--                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');--%>
<%--                    tds.eq(3).html(''); //清空操作--%>
<%--                    console.log(res);--%>
<%--                    $('#videoId').html(res.data);--%>
<%--                    console.log($('#videoId').html());--%>
<%--                    return delete this.files[index] ; //删除文件队列已经上传成功的文件--%>
<%--                }--%>
<%--                this.error(index, upload);--%>
<%--            }--%>
<%--            , error: function (index, upload) {--%>
<%--                var tr = demoListView.find('tr#upload-' + index)--%>
<%--                    , tds = tr.children();--%>
<%--                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');--%>
<%--                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传--%>
<%--            }--%>
<%--        });--%>

<%--        // //多文件列表示例--%>
<%--        // var demoListView = $('#demoList')--%>
<%--        //     ,uploadListIns = upload.render({--%>
<%--        //     elem: '#testList'--%>
<%--        //     ,url: '//manage/videos/uploadVideoInfoToOSS'--%>
<%--        //     ,accept: 'file' //普通文件--%>
<%--        //     ,exts: 'zip|rar|7z' //只允许上传压缩文件--%>
<%--        //     ,acceptMime: '.rar,.zip,.7z'   //可放扩展数据  key-value--%>
<%--        //     ,multiple: true--%>
<%--        //     ,auto: false--%>
<%--        //     ,bindAction: '#testListAction'--%>
<%--        //     ,before:function () {--%>
<%--        //         this.data = {--%>
<%--        //             userId: $('input[name="userId"]').val(),--%>
<%--        //             videoId: $('input[name="videoId"]').val(),--%>
<%--        //             sort:1--%>
<%--        //         }--%>
<%--        //     }--%>
<%--        //     ,choose: function(obj){--%>
<%--        //         var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列--%>
<%--        //--%>
<%--        //         //读取本地文件--%>
<%--        //         obj.preview(function(index, file, result){--%>
<%--        //             var name = file.name.substr(0,file.name.lastIndexOf("."));--%>
<%--        //             var suffix = file.name.substr(file.name.lastIndexOf(".")+1);--%>
<%--        //             var tr = $(['<tr id="upload-' + index + '">'--%>
<%--        //                 , '<td class="table-td demo-edit" ><div  class="layui-table-cell">'+file.name+'</div></td>'--%>
<%--        //                 , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'--%>
<%--        //                 ,'<td>等待上传</td>'--%>
<%--        //                 // ,'<td>'--%>
<%--        //                 // ,'<div class="layui-progress layui-progress-big layui-progress-radius-fix" lay-showpercent="true" lay-filter="image'+index+'">'--%>
<%--        //                 // ,'<div class="layui-progress-bar" lay-percent="0%">'--%>
<%--        //                 // ,'<span class="layui-progress-text">0%</span>'--%>
<%--        //                 // ,'</div>'--%>
<%--        //                 // ,'</div>'--%>
<%--        //                 // ,'</td>'--%>
<%--        //                 , '<td>'--%>
<%--        //                 , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'--%>
<%--        //                 , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'--%>
<%--        //                 , '</td>'--%>
<%--        //                 , '</tr>'].join(''));--%>
<%--        //--%>
<%--        //             tr.find('.demo-edit').on('click',function(){--%>
<%--        //                 var e = $(this);--%>
<%--        //                 var o = e.children(".layui-table-cell");--%>
<%--        //                 var d = $('<input class="layui-input layui-table-edit">');--%>
<%--        //                 d[0].value = o.text(), e.find(".layui-table-edit")[0] || e.append(d), d.focus()--%>
<%--        //                 d.blur(function(){--%>
<%--        //                     var l = $(this);--%>
<%--        //                     l.siblings('.layui-table-cell').html(this.value);--%>
<%--        //                     obj.resetFile(index, file, this.value+'.'+suffix);--%>
<%--        //                     l.remove();--%>
<%--        //                 })--%>
<%--        //             });--%>
<%--        //             //单个重传--%>
<%--        //             tr.find('.demo-reload').on('click', function(){--%>
<%--        //                 obj.upload(index, file);--%>
<%--        //             });--%>
<%--        //--%>
<%--        //             //删除--%>
<%--        //             tr.find('.demo-delete').on('click', function(){--%>
<%--        //                 delete files[index]; //删除对应的文件--%>
<%--        //                 tr.remove();--%>
<%--        //                 uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选--%>
<%--        //             });--%>
<%--        //--%>
<%--        //             demoListView.append(tr);--%>
<%--        //         });--%>
<%--        //     }--%>
<%--        //     ,done: function(res, index, upload){--%>
<%--        //         if(res.code == 0){ //上传成功--%>
<%--        //             var tr = demoListView.find('tr#upload-'+ index)--%>
<%--        //                 ,tds = tr.children();--%>
<%--        //             tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');--%>
<%--        //             tds.eq(3).html(''); //清空操作--%>
<%--        //             return delete this.files[index]; //删除文件队列已经上传成功的文件--%>
<%--        //         }--%>
<%--        //         this.error(index, upload);--%>
<%--        //     }--%>
<%--        //     ,error: function(index, upload,res){--%>
<%--        //--%>
<%--        //         var tr = demoListView.find('tr#upload-'+ index)--%>
<%--        //             ,tds = tr.children();--%>
<%--        //         tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');--%>
<%--        //         tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传--%>
<%--        //     }--%>
<%--        // });--%>
<%--    });--%>
<%--</script>--%>
<%--</body>--%>
<%--</html>--%>
